import { Button, NavBar } from 'antd-mobile';
import React from 'react'
import { useLocation } from 'react-router-dom'
import styles from './index.module.css';

function index() {
  const { state } = useLocation()
  console.log(state);
  const idk = state.item
  console.log(idk);
  return (
    <div>
      <NavBar>景区详情</NavBar>
      <div>
        <img src={idk.image} alt="" width={'100%'} height={'200px'} />
      </div>
      <div className={styles.box1}>
        <div>
          <span>{idk.from}</span><br />
          <span>北京|5A景区</span>
        </div>
        <div>
          <div className={styles.boxr}>
            <span>4.9分</span><br />
            <span>3.78万点评》》</span>
          </div>
        </div>
      </div>
      <div style={{display:'flex', justifyContent:'space-around' }}>
        <div>
          今日开放
        </div>
        <div>
          东城区景山前街
        </div>
      </div>
      <div  style={{display:'flex', justifyContent:'space-between' }}>
        <div>
          <h3>故宫深度游</h3><br/>
          <span>可定今日|无需换票</span><br/>
          <span>已售1.2万+|购买须知》</span>
        </div>
        <div>
          <span style={{color:'red'}}>￥108</span>起<br/>
          <Button color='warning' fill='solid'>预定</Button>
        </div>
      </div>
      <div  style={{display:'flex', justifyContent:'space-between',marginTop:'10px' }}>
        <div>
          <h3>故宫深度游</h3><br/>
          <span>可定今日|无需换票</span><br/>
          <span>已售1.2万+|购买须知》</span>
        </div>
        <div>
          <span style={{color:'red'}}>￥108</span>起<br/>
          <Button color='warning' fill='solid'>预定</Button>
        </div>
      </div>
      <div  style={{display:'flex', justifyContent:'space-between' }}>
        <div>
          <h3>故宫深度游</h3><br/>
          <span>可定今日|无需换票</span><br/>
          <span>已售1.2万+|购买须知》</span>
        </div>
        <div>
          <span style={{color:'red'}}>￥108</span>起<br/>
          <Button color='warning' fill='solid'>预定</Button>
        </div>
      </div>
    </div>
  )
}

export default index